export interface Rules {
  // 校验触发的时机
  trigger: string
  // 枚举类型
  enum: string
  // 必选时，空格是否会被视为错误
  whitespace: boolean
  // 字段长度
  len?: number
  // 最大长度
  max?: number
  // 校验文案
  message: string
  // 最小长度
  min?: number
  // 正则表达式校验
  pattern: RegExp | string
  // 是否必选
  required: boolean
  // 内建校验类型
  type: string
}

export interface WidgetForm {
  list: any[]
  config: {
    formName: string
    formType: number | undefined
    projectType: number | undefined
    promptInfo: string
    createUserName?: string | undefined
    createTime?: string | undefined
    lastEditUserName?: string | undefined
    lastEditTime?: string | undefined
    size: any
    hideRequiredMark: boolean
    layout: any
    labelAlign: any
    labelCol?: {
      gridLayoutNumber: number
      offset: number
    }
  }
  deleteFieldIds: string[]
}

const rulesResult: Rules = {
  trigger: 'blur',
  enum: '',
  whitespace: true,
  len: undefined,
  max: undefined,
  message: '不能为空',
  min: undefined,
  pattern: '',
  required: false,
  type: 'string'
}
const rules = (option = {}): Rules => {
  return Object.assign({}, rulesResult, option)
}

export const widgetForm: WidgetForm = {
  list: [],
  config: {
    formName: '',
    formType: undefined,
    projectType: undefined,
    promptInfo: '',
    size: 'default',
    hideRequiredMark: false,
    layout: 'vertical',
    labelAlign: 'right'
    // labelCol: {
    //   span: 24,
    //   offset: 0
    // }
  },
  deleteFieldIds: []
}

export const basicComponents = [
  {
    fieldName: '单行文本',
    type: 'input',
    fieldType: 1,
    options: {
      width: '100%',
      prefix: '',
      suffix: '',
      addonBefore: '',
      addonAfter: '',
      disabled: false,
      allowClear: true,
      rules: rulesResult,
      // 提示信息
      promptInfo: '',
      // 隐藏提示信息，鼠标悬浮时显示
      hidePromptFlag: 0,
      // 占位提示
      placeholder: '请输入',
      // 属性
      attr: 2,
      // 默认值
      defaultValue: '',
      // 是否隐藏字段名称
      showLabel: 0,
      // 格式校验
      format: 1,
      // 长度限制
      maxlength: 200,
      // 是否可见
      visibleFlag: 1,
      // 是否只读
      readonlyFlag: 0,
      // 是否允许删除
      allowDeleteFlag: 1,
      // 栅格布局
      gridLayoutNumber: 8
    }
  },
  {
    fieldName: '多行文本',
    type: 'textarea',
    fieldType: 2,
    options: {
      width: '100%',
      rows: 4,
      autoSize: false,
      showCount: true,
      disabled: false,
      allowClear: true,
      rules: rulesResult,
      // 提示信息
      promptInfo: '',
      // 隐藏提示信息，鼠标悬浮时显示
      hidePromptFlag: 0,
      // 占位提示
      placeholder: '请输入',
      // 属性
      attr: 2,
      // 默认值
      defaultValue: '',
      // 是否隐藏字段名称
      showLabel: 0,
      // 长度限制
      maxlength: 200,
      // 是否可见
      visibleFlag: 1,
      // 是否只读
      readonlyFlag: 0,
      // 是否允许删除
      allowDeleteFlag: 1,
      // 栅格布局
      gridLayoutNumber: 24
    }
  },
  {
    fieldName: '数值',
    type: 'number',
    fieldType: 3,
    options: {
      width: '100%',
      step: 1,
      disabled: false,
      rules: rules({ type: 'number', required: false }),
      // 提示信息
      promptInfo: '',
      // 隐藏提示信息，鼠标悬浮时显示
      hidePromptFlag: 0,
      // 占位提示
      placeholder: '',
      // 属性
      attr: 2,
      // 默认值
      defaultValue: null,
      // 是否隐藏字段名称
      showLabel: 0,
      // 是否可见
      visibleFlag: 1,
      // 是否只读
      readonlyFlag: 0,
      // 是否允许删除
      allowDeleteFlag: 1,
      // 栅格布局
      gridLayoutNumber: 8,
      // 最小值限制
      min: 0,
      // 最大值限制
      max: 100,
      // 数值格式
      numericFormat: 1,
      // 小数点位数
      decimalPoint: 0
    }
  },
  {
    fieldName: '说明文字',
    type: 'text',
    fieldType: 8,
    options: {
      // 提示信息
      promptInfo: '',
      // 隐藏提示信息，鼠标悬浮时显示
      hidePromptFlag: 0,
      // 属性
      attr: 2,
      // 默认值
      defaultValue: 0,
      // 是否隐藏字段名称
      showLabel: 0,
      // 是否可见
      visibleFlag: 1,
      // 是否允许删除
      allowDeleteFlag: 1,
      // 栅格布局
      gridLayoutNumber: 24,
      // 显示分隔线
      showDivider: 1
    }
  }
]

export const selectComponents = [
  {
    fieldName: '单选框',
    type: 'radio',
    fieldType: 4,
    options: {
      width: '',
      inline: true,
      remoteFunc: 'https://raw.githubusercontent.com/fuchengwei/vue-form-create/master/mock/mock.json',
      remoteOptions: [],
      props: {
        value: 'value',
        label: 'label'
      },
      disabled: false,
      rules: rules({ trigger: 'change', required: false }),
      // 提示信息
      promptInfo: '',
      // 隐藏提示信息，鼠标悬浮时显示
      hidePromptFlag: 0,
      // 属性
      attr: 2,
      // 默认值
      defaultValue: '',
      // 是否隐藏字段名称
      showLabel: 0,
      // 是否可见
      visibleFlag: 1,
      // 是否只读
      readonlyFlag: 0,
      // 是否允许删除
      allowDeleteFlag: 1,
      // 栅格布局
      gridLayoutNumber: 8,
      // 选项来源
      remote: 1,
      // 选项列表
      options: [
        {
          value: '1',
          label: 'Option 1'
        },
        {
          value: '2',
          label: 'Option 2'
        }
      ]
    }
  },
  {
    fieldName: '复选框',
    type: 'checkbox',
    fieldType: 5,
    options: {
      width: '100%',
      inline: true,
      remoteFunc: 'https://raw.githubusercontent.com/fuchengwei/vue-form-create/master/mock/mock.json',
      remoteOptions: [],
      props: {
        value: 'value',
        label: 'label'
      },
      disabled: false,
      rules: rules({ type: 'array', trigger: 'change', required: false }),
      // 提示信息
      promptInfo: '',
      // 隐藏提示信息，鼠标悬浮时显示
      hidePromptFlag: 0,
      // 属性
      attr: 2,
      // 默认值
      defaultValue: [],
      // 是否隐藏字段名称
      showLabel: 0,
      // 是否可见
      visibleFlag: 1,
      // 是否只读
      readonlyFlag: 0,
      // 是否允许删除
      allowDeleteFlag: 1,
      // 栅格布局
      gridLayoutNumber: 8,
      // 选项来源
      remote: 1,
      // 选项列表
      options: [
        {
          value: '1',
          label: 'Option 1'
        },
        {
          value: '2',
          label: 'Option 2'
        }
      ]
    }
  },
  {
    fieldName: '下拉框',
    type: 'select',
    fieldType: 6,
    options: {
      width: '',
      mode: null,
      showSearch: false,
      clearable: true,
      disabled: false,
      remoteConfig: {
        url: '',
        labelKey: 'label',
        valueKey: 'value'
      },
      remoteOptions: [],
      rules: rules({ trigger: 'change', required: false }),
      // 提示信息
      promptInfo: '',
      // 隐藏提示信息，鼠标悬浮时显示
      hidePromptFlag: 0,
      // 占位提示
      placeholder: '',
      // 属性
      attr: 2,
      // 默认值
      defaultValue: [],
      // 是否隐藏字段名称
      showLabel: 0,
      // 是否可见
      visibleFlag: 1,
      // 是否只读
      readonlyFlag: 0,
      // 是否允许删除
      allowDeleteFlag: 1,
      // 栅格布局
      gridLayoutNumber: 8,
      // 选项来源
      remote: 1,
      // 选项列表
      options: [],
      // 是否多选
      multipleFlag: 0
    }
  },
  {
    fieldName: '日期',
    type: 'date',
    fieldType: 7,
    options: {
      width: '100%',
      format: '',
      picker: '',
      showTime: false,
      allowClear: true,
      disabled: false,
      rules: rules({ trigger: 'change', required: false }),
      // 提示信息
      promptInfo: '',
      // 隐藏提示信息，鼠标悬浮时显示
      hidePromptFlag: 0,
      // 占位提示
      placeholder: '请选择时间',
      // 属性
      attr: 2,
      // 默认值
      defaultValue: '',
      // 是否隐藏字段名称
      showLabel: 0,
      // 是否可见
      visibleFlag: 1,
      // 是否只读
      readonlyFlag: 0,
      // 是否允许删除
      allowDeleteFlag: 1,
      // 栅格布局
      gridLayoutNumber: 8,
      // 默认值类型
      defaultValueType: 1,
      // 日期类型
      dateType: 3,
      // 日期格式
      dateFormat: 31
    }
  },
  {
    fieldName: '文件上传',
    type: 'upload',
    fieldType: 9,
    options: {
      width: '',
      inline: true,
      disabled: false,
      rules: rules({ trigger: 'change' }),
      // 提示信息
      promptInfo: '支持pdf、doc、docx、xls、xlsx、xlsm、ppt、pptx、txt、jpg、png、jpeg等格式文件',
      // 隐藏提示信息，鼠标悬浮时显示
      hidePromptFlag: 1,
      // 是否隐藏字段名称
      showLabel: 0,
      // 是否可见
      visibleFlag: 1,
      // 是否允许删除
      allowDeleteFlag: 1,
      // 栅格布局
      gridLayoutNumber: 8,
      // 附件数量限制
      attachmentNumber: 0
    }
  },
  {
    fieldName: '图片',
    type: 'img-upload',
    allowDeleteFlag: 1,
    options: {
      defaultValue: [],
      visibleFlag: 1,
      name: 'file',
      action: 'http://example.com/upload',
      method: 'post',
      listType: 'text',
      accept: 'image/*',
      maxCount: 3,
      multiple: false,
      disabled: false,
      gridLayoutNumber: 24,
      hidePromptFlag: 0,
      attr: 2,
      rules: rulesResult
    }
  }
]

export const advanceComponents = [
  /* {
    label: '图片',
    type: 'img-upload',
    options: {
      defaultValue: [],
      name: 'file',
      action: 'http://example.com/upload',
      method: 'post',
      listType: 'text',
      accept: 'image/*',
      maxCount: 3,
      multiple: false,
      disabled: false,
      rules: rulesResult
    }
  },
  {
    label: '富文本编辑器',
    type: 'richtext-editor',
    options: {
      defaultValue: '',
      width: '',
      disabled: false
    }
  }, */
]

export const layoutComponents = [
  {
    fieldName: '循环事件',
    type: 'grid',
    columns: [
      [
        {
          gridLayoutNumber: 8,
          list: []
        },
        {
          gridLayoutNumber: 8,
          list: []
        },
        {
          gridLayoutNumber: 8,
          list: []
        }
      ]
    ],
    options: {
      gutter: 16,
      isShow: true,
      justify: 'start',
      align: 'top',
      // 是否允许删除
      allowDeleteFlag: 1,
      // 栅格布局
      gridLayoutNumber: 24,
      // 最多循环次数
      maxCycleNumber: 10
    }
  },
  {
    fieldName: '固定组合',
    type: 'fixedCombination',
    options: {
      gutter: 16,
      isShow: true,
      justify: 'start',
      align: 'top',
      // 是否可见
      visibleFlag: 1,
      // 是否允许删除
      allowDeleteFlag: 1,
      // 栅格布局
      gridLayoutNumber: 24,
      // 最多循环次数
      maxCycleNumber: 10
    }
  }
]
